<template>
	<div class="CWorksAttrList list">
		<div class="list-header">
			<div class="th"
				v-bind:style="{'width' : item.width + 'px'}"
				v-for="(item, index) in columns">
				<span v-if="item.type=='index'">#</span>
				<span v-text="item.title"></span>
			</div>
			<div class="th" style="width: 120px;">
				<span>操作</span>
			</div>
		</div>
		<draggable 
			v-model="mData" 
			@update="dataDragEnd" 
			:options="{animation: 300, disabled: !sortable}">
			<transition-group name="list-complete" class="etags-panel">
				<div
					class="row"
					v-bind:class="{'odd': rindex % 2 == 0, 'even' : rindex % 2 == 1}"
					v-for="(row, rindex) in data"
					:key="rindex">
					<div class="td"
						v-bind:style="{'width' : col.width + 'px'}"
						v-for="(col, cindex) in columns"
						v-html="col.type=='index' ? rindex + 1 : col.render != null ? col.render(data[rindex]): data[rindex][col.key]">
					</div>
					<div class="td" style="width: 120px;">
						<span @click="edit(row, rindex)">编辑</span>
						<span @click="editState(row, rindex)" v-if="setState">
								<span v-if="row.state==0">启用</span>
								<span v-if="row.state==1">禁用</span>
						</span>
					</div>
				</div>
			</transition-group>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	
	export default {
		name: 'CWorksAttributeList',
		data() {
			return {
				mData: this.data,
				h: null,
			}
		},
		methods: {
			getData(evt) {
				console.log(evt.draggedContext.element.id)
			},
			dataDragEnd(evt) {
				console.log('拖动前的索引 :' + evt.oldIndex)
				console.log('拖动后的索引 :' + evt.newIndex)
				console.log(this.mData)
			},
			edit(data, index) {
				this.$emit('on-edit', data, index);
			},
			editState(data, index) {
				this.$emit('on-editState', data, index);
			}
		},
		components:{
			draggable
		},
		watch: {
			'data'(val) {
				this.mData = val;
			},
			'mData'(val) {
				this.$emit('on-change', this.mData);
			}
	    },
		props: ['columns', 'data', 'sortable', 'setState']
	}
</script>

<style>
	.label-item {
    		padding: 2px 6px;
    		border-radius: 3px;
    		-webkit-border-radius: 3px;
    		-moz-border-radius: 3px;
    }
</style>
<style scoped="scoped">
	.list {
		border: 1px solid #e3e8ee;
		display: inline-block;
		display: -webkit-inline-block;
	}
	
	.list-header {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		opacity: 0.87;
		font-size: 13px;
		width: ;
	}
	
	.list .row {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		opacity: 0.87;
		font-size: 12px;
		cursor: pointer;
	}
	
	
	.list-header .th {
		height: 40px;
	    white-space: nowrap;
	    overflow: hidden;
	    line-height: 40px;
	    text-align: center;
	    width: 200px;
	    background-color: #f5f7f9;
	    border-right: 1px solid #e3e8ee;
    }
    .list-header .th:last-child {
    		border-right: none;
    }
    
    .list .row .td {
		height: 40px;
	    white-space: nowrap;
	    overflow: hidden;
	    line-height: 40px;
	    text-align: center;
	    width: 200px;
	     border-right: 1px solid #e3e8ee;
    }
    .list .row .td:last-child {
    		border-right: none;
    }
    .list .odd {
    		background: #FFF;
    }
    
    .list .even {
    		background: #f5f7f9;
    }
</style>